<template>
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        {{pageTitle}}
        <small v-if="subTitle">{{subTitle}}</small>
      </h1>
      <ol class="breadcrumb">
        <li v-for="(nav,i) in $route.matched" :class="{active:$route.matched.length-1 == i}">
          <template v-if="$route.matched.length-1 == i">{{nav.meta.navText}}</template>
          <router-link :to="nav.path" v-else>{{nav.meta.navText}}</router-link>
        </li>
      </ol>
    </section>
    <section class="content">
      <slot/>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'ContentWrapper',
    props: {
      title: {
        type: String
      },
      subTitle: {
        type: String
      }
    },
    computed: {
      pageTitle() {
        // 当前页面标题，如果没有自定，则获取当前路由配置的页面标题
        return this.title ? this.title : this.$route.meta.navText;
      }
    },
    mounted() {
      // 页面变更的同时修改网页标题
      document.title = `${this.pageTitle} - VBoot`;
    }
  };
</script>

<style scoped>

</style>
